import { Button, Form, Input, InputNumber, Select, Space, } from "antd";
import React, { Component } from "react";
import { phoneReg } from "@/utils/regexp";
import { apiAddRoomInfo } from "@/request/house";
import _ from "lodash";
import '../../style/style.less'
import { apiGetStoreServicePage, apiGetServiceClassify } from '@/request/cashier';
import { apiUpdateRoomInfo } from "../../../../request/house";

const { TextArea } = Input
class Add extends Component {
  formRef = React.createRef()

  state = {
    btnLoading: false,
    options: [],
    serviceName: ''
  };
  componentDidMount() {
    this.getData()
    const { type, verificationPersonnelId, editorValue } = this.props;
    if (type === "edit") {
      this.setState(
        {
          verificationPersonnelId,
          type,
        },
        () => {
          this.formRef.current.setFieldsValue({ ...editorValue });
        }
      );
    } else {
      this.setState({ type });
    }
  }
  getData = async () => {
    // 获取酒店服务id
    let hotel = await apiGetServiceClassify()
    if (hotel.code === 0) {
      hotel.data.map(async (v) => {
        if (v.serviceClassifyName === '酒店') {
          let serviceClassifyId = v.serviceClassifyId
          let res = await apiGetStoreServicePage({ approvalStatus: 'T', serviceStatus: 'Y', pageNo: -1, pageSize: -1, serviceClassifyId })
          if (res.code === 0 && res.data) {
            // serviceData
            let options = []
            res.data.map((item) => {
              options.push({ value: item.serviceId, label: item.serviceName })
            })
            this.setState({
              options
            })
            if (this.props.type === 'edit') {
              await React.$get('/management/roomInfo/' + this.state.verificationPersonnelId).then(res => {
                if (res.code === 0) {
                  console.log(res.data);
                  this.formRef.current.setFieldsValue({
                    ...res.data
                  })
                }
              })
            }
          }
        }
      })

    }
    //房型分类  

  }
  /**
   * @desc 确认自定义密码验证
   * @params Reg {rule} 验证规则
   * @params string {value} 需要验证的字符串
   * @params fun {callback} 回调函数
   * */
  // validatePassword = (rule, value, callback) => {
  //   const password = this.formRef.getFieldsValue(["password"]).password;
  //   if (value !== password) {
  //     callback("确认两次输入的密码一致");
  //   }
  //   callback();
  // };
  onFinish = async (values) => {
    this.setState({ btnLoading: true });
    _.forIn(values, (v, k) => {
      if (!v) {
        delete values[k];
      }
    });
    console.log(values);
    if (this.state.type === "add") {
      let res = await apiAddRoomInfo({ ...values, serviceName: this.state.serviceName, remark: values.remark ? values.remark : '' });
      if (res.code === 0) {
        this.props.closeDialog();
        React.$message({
          type: "info",
          content: "新增成功",
        });
        this.props.reload();
        this.setState({ btnLoading: false });
      } else {
        this.setState({ btnLoading: false });
      }
    } else {
      let res = await apiUpdateRoomInfo({
        ...values,
        roomId: this.state.verificationPersonnelId,
        remark: values.remark ? values.remark : ''
      });
      if (res.code === 0) {
        this.props.closeDialog();
        React.$message({
          type: "info",
          content: "修改成功",
        });
        this.props.reload();
        this.setState({ btnLoading: false });
      } else {
        this.setState({ btnLoading: false });
      }
    }
  };
  getService = (e) => {
    this.setState({
      serviceName: e.label
    })
    this.formRef.current.setFieldsValue({ serviceId: e.value })

  }
  render() {
    const { options } = this.state
    // const options = [
    //   {
    //     label: "启用",
    //     value: "Y",
    //   },
    //   {
    //     label: "禁用",
    //     value: "N",
    //   },
    // ];
    return (
      <div>
        <Form
          labelCol={{ span: 6 }}
          labelAlign="right"
          ref={this.formRef}
          initialValue={{ remark: '' }}
          onFinish={this.onFinish}
        >
          <Form.Item
            label="选择房型"
            name="serviceId"
            rules={[{ required: true }]}
          >
            <Select labelInValue placeholder="请选择房型" style={{ width: "100%" }} options={options} onChange={this.getService}>
            </Select>
            {/* <Input placeholder="请输入关联酒店服务" maxLength={20} /> */}
          </Form.Item>
          <Form.Item
            label="房间号码"
            name="roomName"
            rules={[
              { required: true, message: "请输入正确的房间号码" },
            ]}
          >
            <Input maxLength={20} placeholder="请输入房间号码信息（数字/文字）" />
          </Form.Item>
          <Form.Item
            label="房间排序"
            name="sort"
            rules={[
              { required: true, message: "请输入正确的房间排序" },
            ]}
          >
            <InputNumber min={1} maxLength={4} placeholder="请输入房间排序" />
            {/* <Input placeholder="请输入房间排序" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" /> */}
          </Form.Item>
          <Form.Item
            label="关联监控"
            name="cameraUrl"
            rules={[{ required: true }]}
          >
            <Input placeholder="请选择门店摄像头进行关联" />
          </Form.Item>
          <Form.Item
            label="传感器网关"
            name="agt"
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="传感器设备号"
            name="me"
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="备注"
            name="remark"
          >
            <TextArea allowClear maxLength={9} showCount autoSize={{ minRows: 3, maxRows: 6 }} />
          </Form.Item>
          <Form.Item>
            <div
              style={{
                display: "flex",
                justifyContent: "flex-end",
                marginBottom: -30,
              }}
            >
              <Space>
                <Button onClick={this.props.closeDialog}>取消</Button>
                <Button
                  loading={this.state.btnLoading}
                  htmlType="submit"
                  type="primary"
                >
                  确认
                </Button>
              </Space>
            </div>
          </Form.Item>
        </Form>
      </div >
    );
  }
}

export default Add;
